<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <title>蚂蚁部落</title>
  <style>
    ul,
    li {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .container {
      display: inline-block;
      background: #efefef;
      padding: 10px;
      border: 1px solid #ccc;
      font-family: "Microsoft YaHei";
    }

    .container .li-box {
      height: 28px;
      overflow: hidden;
    }

    .container ul {
      position: relative;
      animation: moveUp 8s 0.6s infinite;
      -webkit-animation: moveUp 8s 0.6s infinite;
    }

    @keyframes moveUp {
      0% {
        top: 0px;
      }

      18% {
        top: 0px;
      }

      20% {
        top: -28px;
      }

      38% {
        top: -28px;
      }

      40% {
        top: -56px;
      }

      58% {
        top: -56px;
      }

      60% {
        top: -84px;
      }

      78% {
        top: -84px;
      }

      80% {
        top: -112px;
      }

      98% {
        top: -112px;
      }
    }

    @-webkit-keyframes moveUp {
      0% {
        top: 0px;
      }

      18% {
        top: 0px;
      }

      20% {
        top: -28px;
      }

      38% {
        top: -28px;
      }

      40% {
        top: -56px;
      }

      58% {
        top: -56px;
      }

      60% {
        top: -84px;
      }

      78% {
        top: -84px;
      }

      80% {
        top: -112px;
      }

      98% {
        top: -112px;
      }
    }

    .container li {
      line-height: 1.8;
      color: #666;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="li-box">
      <ul>
        <li>本站的url地址是www.softwhy.com</li>
        <li>只有努力奋斗才会有美好的未来</li>
        <li>每一天都是新的必须要好好珍惜。</li>
        <li>当下的时间才是最宝贵的，下一秒都是虚幻</li>
        <li>欢迎提供有益的建议和意见。</li>
        <li>蚂蚁部落位于青岛市南区</li>
      </ul>
    </div>
  </div>
</body>

</html>